<template>
  <div id="register_card" style="display: block">
    <el-card class="box-card">
      <div slot="header">
        <h2 class="register_title">注册</h2>
      </div>
      <div>
        <div class="register-form-item">
          <input class="register-input" v-model="registerForm.mobile" type="text" placeholder="手机号">
        </div>
        <div class="register-form-item">
          <input class="register-input" v-model="registerForm.email" type="text" placeholder="邮箱">
        </div>
        <div class="register-form-item">
          <input class="register-input" v-model="registerForm.password" type="text" placeholder="密码">
        </div>
        <div class="register-form-item">
          <input class="register-input" v-model="registerForm.confirmPassword" type="text" placeholder="再次输入密码">
        </div>
        <div class="register-form-item">
          <input class="register-input" v-model="registerForm.code" type="text" placeholder="验证码">
        </div>
        <div class="login-code">
          <img :src="codeUrl" @click="getCodeImg" class="login-code-img"/>
        </div>
      </div>

      <div style="margin-top: 10px;">
        <button class="register_btn" type="button" @click="registerSubmit">注册</button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {get_code_img, reg_user} from "@/api/auth";

export default {
  name: "register",
  data() {
    return {
      codeUrl: "",
      registerForm: {
        mobile: "",
        email: "",
        password: "",
        confirmPassword: "",
        code: ""
      }
    }
  },

  created() {
    this.getCodeImg();
  },



  methods: {
    //注册提交
    registerSubmit() {
      reg_user(this.registerForm).then(res => {
        if (res.status === 200) {
          this.$router.push({path: "/login"})
          this.registerForm = {};
          //this.$router.go(0);
          this.$message.success(res.msg + "请登录")
        }
      })
    },

    //获取图形验证码
    getCodeImg() {
      get_code_img().then(res => {
        if (res.status === 200) {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.loginForm.uuid = res.data.uuid;
        }
      })
    },


  }
}
</script>

<style lang="less">


.box-card {
  margin: 100px auto;
  width: 300px;
  height: 500px;
}

.register_title {
  margin-left: 110px;
  color: #2EFEC8;
}


.register-input {
  width: 250px;
  height: 40px;
  margin-top: 10px;
  outline: none;
  border: 1px solid #DCDFE6;
  text-indent: 10px;

}

.register-form-item input {
  border-radius: 40px;

}

.register_btn {
  background-color: #2EFEC8;
  border-radius: 40px;
  border: none;
  color: white;
  font-size: 20px;
  width: 250px;
  height: 40px;
  margin-left: 7px;

}

.register_btn:hover {
  border: none;
  box-shadow: 0 4px 10px rgba(255, 113, 50, 0.5);

}

.register_btn:active {
  border: none;


}

button:focus {
  outline: 0
}

#register_card {
  background-color: #151515;
  width: 100%;
  height: 100%;
  position: absolute;
}

.login-code {
  margin-top: 5px;
  margin-left: 65px;
}

.login-code-img {
  border-radius: 30px;
}
</style>
